/*
 * @Author: Salaing
 * @Date: 2024-08-25 22:55:16
 * @LastEditors: Salaing
 * @LastEditTime: 2024-09-05 00:36:10
 * @Description: file content
 * 新增子部门里的childList只记录了 _id
 * 删除子部门里的childList记录了 所有字段
 */
import React, { useState } from 'react';
import { Table, Button, Modal } from 'antd';
import iconMap from 'components/IconMap';
import AddChildModal from './AddChildModal';

const { Columns } = Table;
function ChildDeparment({ childList, pushOrUpdateList, departmentDetail }) {
  const [delList, setDelList] = useState([]);
  const [showDelModal, setShowDelModal] = useState(false);
  const [showChildModal, setShowChildModal] = useState(false);

  // 删除选中的内容
  //- 删除子部门
  const delDepartment = () => {
    setShowDelModal(false);
    if (departmentDetail) {
      pushOrUpdateList({ list: delList, type: 'del' });
    } else {
      const ids = delList.map((item) => item._id);
      const tempArr = childList.filter((item) => !ids.includes(item._id));
      pushOrUpdateList({ list: tempArr, type: 'add' });
    }
  };
  //- 增加子部门事件处理
  const getDepartmentList = () => {
    setShowChildModal(true);
  };

  //
  return (
    <>
      <Table
        dataSource={childList}
        rowSelection={{ onChange: (ids, record) => setDelList(record) }}
        pagination={false}
        rowKey={(record) => record._id || ''}
        expandable={{
          expandIconAsCell: false,
          expandedRowKeys: [],
          expandIconColumnIndex: -1,
        }}
      >
        <columns
          title="部门名称"
          dataIndex="departmentName"
          key="departmentName"
        />
      </Table>

      {/* 操作按钮 */}
      <div className="operation">
        <Button
          type="primary"
          size="small"
          icon={iconMap.api}
          style={{ marginRight: '10px' }}
          onClick={getDepartmentList}
        >
          增加子部门
        </Button>
        <Button
          type="primary"
          size="small"
          icon={iconMap.api}
          disabled={!delList.length}
          style={{ marginRight: '10px' }}
          onClick={() => setShowDelModal(true)}
        >
          解除子部门关联
        </Button>

        {/* 新增子部门的弹窗 */}
        <AddChildModal
          showChildModal={showChildModal}
          setShowChildModal={setShowChildModal}
          pushOrUpdateList={pushOrUpdateList}
          existsList={childList}
        />

        {/* 删除子部门的弹窗 */}
        <Modal
          title="提示"
          open={showDelModal}
          onOk={() => {
            delDepartment();
          }}
          onCancel={() => {
            setShowDelModal(false);
          }}
        >
          确定要删除选择的部门吗?
        </Modal>
      </div>
    </>
  );
}

export default ChildDeparment;
